<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { navigateBack, showToast, showLoading } from '@tarojs/taro';
import { ADD_CAR_APPLY } from '/@/api/modules/parking/park-car-apply';
import { formState, formRules, state } from './state';
import ApproveProcessList from '../../approve/edit/components/approve-process-list/approve-process-list.vue';
import { QUERY_FTD_FOR_ADD_FLOW } from '/@/api/modules/flow-path/flow-path-template';
/**
 * 添加车辆表格
 */
const formRef = ref();
/**
 * 车牌号信息
 */
const licensePlate = ref('');
/**
 *添加车辆信息
 */
function addCar() {
  formRef.value.validate().then(({ valid }) => {
    if (!valid) return;

    if (!state.pass) {
      showToast({
        title: '请输入完整车牌号！',
        icon: 'error',
      });
      return;
    }
    showLoading();
    ADD_CAR_APPLY({
      content: {
        plateNo: formState.plateNo,
        note: formState.note,
        carPicUrl: formState.carPicUrl,
      },
      flowGraphAddFlow: state.flowGraphAddFlow,
    }).then((res) => {
      if (res.comResp?.code === 100) {
        showToast({
          title: '添加车辆成功,请耐心等待审核!',
          icon: 'success',
          success: () => {
            setTimeout(() => {
              navigateBack();
            }, 2000);
          },
        });
      }
    });
  });
}

/**
 * @function 上传文件
 * @param imgList
 */
function uploadImageChange(imgList: { key: string; src: string }[]) {
  formState.carPicUrl = imgList[0].src;
}

onMounted(() => {
  formState.plateNo = '';
  formState.note = '';
  formState.carPicUrl = '';
  licensePlate.value = '';
});

function change(val: any) {
  state.pass = val.pass;
  formState.plateNo = val.value;
}
/**
 * 查询审批模版详情
 * @param code 审批模版code
 */
function queryDetail(code: string) {
  showLoading();
  QUERY_FTD_FOR_ADD_FLOW({ code }).then((res) => {
    state.flowGraphAddFlow = res.flowpathTemplateDto?.flowGraphAddFlow;
  });
}

onMounted(() => {
  queryDetail('c16184f3-e5be-4d63-b7cc-ded18b2979e4');
});
</script>

<template>
  <view class="park-add app-page--1">
    <app-navbar title="添加车辆" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @click.stop="state.isHide = !state.isHide"
    >
      <view class="park-add__wrapper">
        <nut-form :model-value="formState" :rules="formRules" ref="formRef">
          <nut-form-item label="车牌号码" prop="plateNo" required error-message-align="left">
          </nut-form-item>
          <nut-form-item>
            <app-license-plate
              v-model="licensePlate"
              @change="change"
              :isHide="state.isHide"
            ></app-license-plate>
          </nut-form-item>
          <nut-form-item label="申请原因" prop="note" required error-message-align="left">
            <nut-input v-model="formState.note" placeholder="请输入申请原因" type="text" />
          </nut-form-item>
          <nut-form-item label="上传照片">
            <app-upload-image @on-change="uploadImageChange" :max="1" module="parking" />
          </nut-form-item>
          <approve-process-list
            v-if="state.flowGraphAddFlow && Object.keys(state.flowGraphAddFlow).length > 0"
            :flow-graph-add-flow="state.flowGraphAddFlow"
          />
        </nut-form>
      </view>
    </scroll-view>
    <view class="park-add__footer">
      <nut-button block type="info" @click="addCar()"> 提交 </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
